'use client'

import { useState, useEffect } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Skeleton } from '@/components/ui/skeleton'
import { DocumentManagement } from './document-management'
import { 
  ArrowLeft, 
  Users, 
  FolderOpen, 
  CheckSquare, 
  Bug, 
  TestTube, 
  Settings,
  Calendar,
  Activity,
  Cpu,
  FileText,
  Package,
  Wrench,
  BarChart3,
  MessageSquare,
  Paperclip,
  TrendingUp,
  TrendingDown,
  Clock,
  User,
  AlertCircle,
  CheckCircle,
  Circle
} from 'lucide-react'

interface ProjectDetail {
  id: string
  name: string
  key: string
  description?: string
  type: string
  status: string
  createdAt: string
  updatedAt: string
  members: Array<{
    id: string
    role: string
    user: {
      id: string
      name?: string
      username: string
      email?: string
    }
  }>
  iterations: Array<{
    id: string
    name: string
    status: string
    startDate: string
    endDate: string
  }>
  requirements: Array<{
    id: string
    title: string
    type: string
    priority: string
    status: string
    creator: {
      name?: string
      username: string
    }
    assignee?: {
      name?: string
      username: string
    }
    createdAt: string
  }>
  tasks: Array<{
    id: string
    title: string
    type: string
    priority: string
    status: string
    creator: {
      name?: string
      username: string
    }
    assignee?: {
      name?: string
      username: string
    }
    dueDate?: string
    createdAt: string
  }>
  bugs: Array<{
    id: string
    title: string
    severity: string
    priority: string
    status: string
    creator: {
      name?: string
      username: string
    }
    assignee?: {
      name?: string
      username: string
    }
    createdAt: string
  }>
  hardwareVersions: Array<{
    id: string
    version: string
    name: string
    status: string
    createdAt: string
  }>
  boms: Array<{
    id: string
    version: string
    name: string
    status: string
    totalCost?: number
    createdAt: string
  }>
  testCases: Array<{
    id: string
    title: string
    type: string
    priority: string
    status: string
    creator: {
      name?: string
      username: string
    }
    createdAt: string
  }>
  hardwareTests: Array<{
    id: string
    name: string
    description?: string
    type: string
    status: string
    testPlan?: string
    testReport?: string
    testStandard?: string
    testDate?: string
    passFail?: string
    tester?: {
      name?: string
      username: string
    }
    hardwareVersion?: {
      id: string
      version: string
      name: string
    }
    createdAt: string
  }>
  productionOrders: Array<{
    id: string
    orderNumber: string
    version: string
    quantity: number
    status: string
    startDate?: string
    endDate?: string
    cost?: number
    currency?: string
    factory?: string
    line?: string
    createdAt: string
  }>
  qualityReports: Array<{
    id: string
    reportType: string
    batchNumber?: string
    sampleSize?: number
    defectCount?: number
    result: string
    issues?: string
    inspector?: string
    inspectedAt?: string
    productionOrder?: {
      id: string
      orderNumber: string
      version: string
    }
    createdAt: string
  }>
  attachments: Array<{
    id: string
    filename: string
    size: number
    mimeType: string
    uploader: {
      name?: string
      username: string
    }
    createdAt: string
  }>
  _count: {
    requirements: number
    tasks: number
    bugs: number
    members: number
    iterations: number
    testCases: number
    hardwareVersions: number
    boms: number
    comments: number
    attachments: number
    hardwareTests: number
    productionOrders: number
    qualityReports: number
  }
}

export function ProjectDetail() {
  const params = useParams()
  const router = useRouter()
  const projectId = params.id as string
  const [project, setProject] = useState<ProjectDetail | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchProjectDetail = async () => {
      if (!projectId) return
      
      setLoading(true)
      try {
        const response = await fetch(`/api/projects/${projectId}`)
        if (response.ok) {
          const data = await response.json()
          setProject(data)
        } else {
          console.error('Error fetching project detail')
          router.push('/projects')
        }
      } catch (error) {
        console.error('Error fetching project detail:', error)
        router.push('/projects')
      } finally {
        setLoading(false)
      }
    }

    fetchProjectDetail()
  }, [projectId, router])

  const getStatusColor = (status: string) => {
    const colors: Record<string, string> = {
      ACTIVE: 'bg-green-100 text-green-800',
      ARCHIVED: 'bg-gray-100 text-gray-800',
      COMPLETED: 'bg-blue-100 text-blue-800',
      draft: 'bg-gray-100 text-gray-800',
      active: 'bg-blue-100 text-blue-800',
      in_progress: 'bg-yellow-100 text-yellow-800',
      completed: 'bg-green-100 text-green-800',
      cancelled: 'bg-red-100 text-red-800',
      PLANNING: 'bg-purple-100 text-purple-800',
      ACTIVE: 'bg-green-100 text-green-800',
      COMPLETED: 'bg-blue-100 text-blue-800',
      CANCELLED: 'bg-red-100 text-red-800',
      DRAFT: 'bg-gray-100 text-gray-800',
      REVIEW: 'bg-yellow-100 text-yellow-800',
      APPROVED: 'bg-green-100 text-green-800',
      PRODUCTION: 'bg-blue-100 text-blue-800',
      DESIGN: 'bg-purple-100 text-purple-800',
      PROTOTYPE: 'bg-orange-100 text-orange-800',
      TESTING: 'bg-yellow-100 text-yellow-800',
      VALIDATION: 'bg-blue-100 text-blue-800',
      PRODUCTION: 'bg-green-100 text-green-800',
      OBSOLETE: 'bg-gray-100 text-gray-800'
    }
    return colors[status] || 'bg-gray-100 text-gray-800'
  }

  const getTypeColor = (type: string) => {
    const colors: Record<string, string> = {
      SOFTWARE: 'bg-purple-100 text-purple-800',
      HARDWARE: 'bg-orange-100 text-orange-800',
      INTEGRATED: 'bg-blue-100 text-blue-800',
      MATERIAL: 'bg-yellow-100 text-yellow-800',
      FEATURE: 'bg-purple-100 text-purple-800',
      BUG: 'bg-red-100 text-red-800',
      IMPROVEMENT: 'bg-blue-100 text-blue-800',
      FUNCTIONAL: 'bg-green-100 text-green-800',
      PERFORMANCE: 'bg-orange-100 text-orange-800'
    }
    return colors[type] || 'bg-gray-100 text-gray-800'
  }

  const getTypeLabel = (type: string) => {
    const labels: Record<string, string> = {
      SOFTWARE: '软件项目',
      HARDWARE: '硬件项目',
      INTEGRATED: '集成项目',
      MATERIAL: '物料项目',
      FEATURE: '功能',
      BUG: '缺陷',
      IMPROVEMENT: '改进',
      FUNCTIONAL: '功能测试',
      PERFORMANCE: '性能测试'
    }
    return labels[type] || type
  }

  const getStatusLabel = (status: string) => {
    const labels: Record<string, string> = {
      ACTIVE: '活跃',
      ARCHIVED: '已归档',
      COMPLETED: '已完成',
      draft: '草稿',
      active: '活跃',
      in_progress: '进行中',
      completed: '已完成',
      cancelled: '已取消',
      PLANNING: '计划中',
      ACTIVE: '活跃',
      COMPLETED: '已完成',
      CANCELLED: '已取消',
      DRAFT: '草稿',
      REVIEW: '审核中',
      APPROVED: '已批准',
      PRODUCTION: '生产中',
      DESIGN: '设计阶段',
      PROTOTYPE: '原型阶段',
      TESTING: '测试阶段',
      VALIDATION: '验证阶段',
      PRODUCTION: '生产阶段',
      OBSOLETE: '已废弃'
    }
    return labels[status] || status
  }

  const getPriorityColor = (priority: string) => {
    const colors: Record<string, string> = {
      low: 'bg-gray-100 text-gray-800',
      medium: 'bg-yellow-100 text-yellow-800',
      high: 'bg-orange-100 text-orange-800',
      urgent: 'bg-red-100 text-red-800'
    }
    return colors[priority] || 'bg-gray-100 text-gray-800'
  }

  const getSeverityColor = (severity: string) => {
    const colors: Record<string, string> = {
      LOW: 'bg-gray-100 text-gray-800',
      MEDIUM: 'bg-yellow-100 text-yellow-800',
      HIGH: 'bg-orange-100 text-orange-800',
      CRITICAL: 'bg-red-100 text-red-800',
      BLOCKER: 'bg-purple-100 text-purple-800'
    }
    return colors[severity] || 'bg-gray-100 text-gray-800'
  }

  if (loading) {
    return (
      <div className="space-y-6">
        <div className="flex items-center space-x-4">
          <Button variant="ghost" size="icon">
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <div>
            <Skeleton className="h-8 w-48 mb-2" />
            <Skeleton className="h-4 w-64" />
          </div>
        </div>
        
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
            <Card key={i}>
              <CardHeader className="pb-2">
                <Skeleton className="h-4 w-20" />
              </CardHeader>
              <CardContent>
                <Skeleton className="h-8 w-12" />
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="grid gap-6">
          {[1, 2, 3, 4].map((i) => (
            <Card key={i}>
              <CardHeader>
                <Skeleton className="h-6 w-32" />
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {[1, 2, 3].map((j) => (
                    <div key={j} className="flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <Skeleton className="h-4 w-4" />
                        <Skeleton className="h-4 w-24" />
                      </div>
                      <Skeleton className="h-6 w-16" />
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    )
  }

  if (!project) {
    return (
      <div className="text-center py-12">
        <AlertCircle className="mx-auto h-12 w-12 text-gray-400 mb-4" />
        <h3 className="text-lg font-medium text-gray-900 mb-2">项目未找到</h3>
        <p className="text-gray-500 mb-4">请检查项目ID是否正确</p>
        <Button onClick={() => router.push('/projects')}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          返回项目列表
        </Button>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* 页面头部 */}
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <Button variant="ghost" size="icon" onClick={() => router.push('/projects')}>
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <div>
            <h1 className="text-3xl font-bold tracking-tight">{project.name}</h1>
            <div className="flex items-center space-x-2 mt-2">
              <Badge className={getTypeColor(project.type)}>
                {getTypeLabel(project.type)}
              </Badge>
              <Badge className={getStatusColor(project.status)}>
                {getStatusLabel(project.status)}
              </Badge>
              <span className="text-sm text-gray-500 font-mono bg-gray-100 px-2 py-1 rounded">
                {project.key}
              </span>
            </div>
            {project.description && (
              <p className="text-gray-600 mt-2">{project.description}</p>
            )}
          </div>
        </div>
      </div>

      {/* 统计卡片 */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">需求</CardTitle>
            <CheckSquare className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{project._count.requirements}</div>
            <p className="text-xs text-muted-foreground">
              功能需求和改进
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">任务</CardTitle>
            <Activity className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{project._count.tasks}</div>
            <p className="text-xs text-muted-foreground">
              工作任务和活动
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">缺陷</CardTitle>
            <Bug className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{project._count.bugs}</div>
            <p className="text-xs text-muted-foreground">
              缺陷和问题
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">团队成员</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{project._count.members}</div>
            <p className="text-xs text-muted-foreground">
              项目成员
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">迭代</CardTitle>
            <Calendar className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{project._count.iterations}</div>
            <p className="text-xs text-muted-foreground">
              时间周期
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">测试用例</CardTitle>
            <TestTube className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{project._count.testCases}</div>
            <p className="text-xs text-muted-foreground">
              测试用例
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">硬件版本</CardTitle>
            <Cpu className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{project._count.hardwareVersions}</div>
            <p className="text-xs text-muted-foreground">
              硬件版本
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">BOM清单</CardTitle>
            <FileText className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{project._count.boms}</div>
            <p className="text-xs text-muted-foreground">
              物料清单
            </p>
          </CardContent>
        </Card>
      </div>

      {/* 详细信息标签页 */}
      <Tabs defaultValue="overview" className="w-full">
        <TabsList className="grid w-full grid-cols-9">
          <TabsTrigger value="overview">概览</TabsTrigger>
          <TabsTrigger value="requirements">需求</TabsTrigger>
          <TabsTrigger value="tasks">任务</TabsTrigger>
          <TabsTrigger value="bugs">缺陷</TabsTrigger>
          <TabsTrigger value="hardware">硬件</TabsTrigger>
          <TabsTrigger value="documents">资料</TabsTrigger>
          <TabsTrigger value="members">成员</TabsTrigger>
          <TabsTrigger value="iterations">迭代</TabsTrigger>
          <TabsTrigger value="activity">活动</TabsTrigger>
        </TabsList>

        <TabsContent value="overview" className="space-y-6">
          <div className="grid gap-6 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>项目信息</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">项目标识</span>
                  <span className="text-sm font-mono bg-gray-100 px-2 py-1 rounded">{project.key}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">项目类型</span>
                  <Badge className={getTypeColor(project.type)}>
                    {getTypeLabel(project.type)}
                  </Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">项目状态</span>
                  <Badge className={getStatusColor(project.status)}>
                    {getStatusLabel(project.status)}
                  </Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">创建时间</span>
                  <span className="text-sm text-gray-600">
                    {new Date(project.createdAt).toLocaleDateString('zh-CN')}
                  </span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">更新时间</span>
                  <span className="text-sm text-gray-600">
                    {new Date(project.updatedAt).toLocaleDateString('zh-CN')}
                  </span>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>项目描述</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-gray-600 leading-relaxed">
                  {project.description || '暂无项目描述'}
                </p>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        <TabsContent value="requirements" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <CheckSquare className="h-5 w-5" />
                <span>需求列表</span>
                <Badge variant="secondary">{project.requirements.length}</Badge>
              </CardTitle>
              <CardDescription>
                项目中的所有需求、功能和改进建议
              </CardDescription>
            </CardHeader>
            <CardContent>
              {project.requirements.length === 0 ? (
                <div className="text-center py-8">
                  <CheckSquare className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                  <p className="text-gray-500">暂无需求</p>
                </div>
              ) : (
                <div className="space-y-4">
                  {project.requirements.map((requirement) => (
                    <div 
                      key={requirement.id} 
                      className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 cursor-pointer"
                      onClick={() => window.location.href = `/requirements/${requirement.id}`}
                    >
                      <div className="flex-1">
                        <div className="flex items-center space-x-2 mb-2">
                          <Badge className={getTypeColor(requirement.type)}>
                            {getTypeLabel(requirement.type)}
                          </Badge>
                          <Badge className={getPriorityColor(requirement.priority)}>
                            {requirement.priority}
                          </Badge>
                          <Badge className={getStatusColor(requirement.status)}>
                            {getStatusLabel(requirement.status)}
                          </Badge>
                        </div>
                        <h4 className="font-medium">{requirement.title}</h4>
                        <div className="flex items-center space-x-4 mt-2 text-sm text-gray-500">
                          <span>创建者: {requirement.creator.name || requirement.creator.username}</span>
                          {requirement.assignee && (
                            <span>指派给: {requirement.assignee.name || requirement.assignee.username}</span>
                          )}
                          <span>{new Date(requirement.createdAt).toLocaleDateString('zh-CN')}</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="tasks" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Activity className="h-5 w-5" />
                <span>任务列表</span>
                <Badge variant="secondary">{project.tasks.length}</Badge>
              </CardTitle>
              <CardDescription>
                项目中的所有任务和工作项
              </CardDescription>
            </CardHeader>
            <CardContent>
              {project.tasks.length === 0 ? (
                <div className="text-center py-8">
                  <Activity className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                  <p className="text-gray-500">暂无任务</p>
                </div>
              ) : (
                <div className="space-y-4">
                  {project.tasks.map((task) => (
                    <div 
                      key={task.id} 
                      className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 cursor-pointer"
                      onClick={() => window.location.href = `/tasks/${task.id}`}
                    >
                      <div className="flex-1">
                        <div className="flex items-center space-x-2 mb-2">
                          <Badge className={getTypeColor(task.type)}>
                            {getTypeLabel(task.type)}
                          </Badge>
                          <Badge className={getPriorityColor(task.priority)}>
                            {task.priority}
                          </Badge>
                          <Badge className={getStatusColor(task.status)}>
                            {getStatusLabel(task.status)}
                          </Badge>
                        </div>
                        <h4 className="font-medium">{task.title}</h4>
                        <div className="flex items-center space-x-4 mt-2 text-sm text-gray-500">
                          <span>创建者: {task.creator.name || task.creator.username}</span>
                          {task.assignee && (
                            <span>指派给: {task.assignee.name || task.assignee.username}</span>
                          )}
                          {task.dueDate && (
                            <span>截止: {new Date(task.dueDate).toLocaleDateString('zh-CN')}</span>
                          )}
                          <span>{new Date(task.createdAt).toLocaleDateString('zh-CN')}</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="bugs" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Bug className="h-5 w-5" />
                <span>缺陷列表</span>
                <Badge variant="secondary">{project.bugs.length}</Badge>
              </CardTitle>
              <CardDescription>
                项目中的所有缺陷和问题
              </CardDescription>
            </CardHeader>
            <CardContent>
              {project.bugs.length === 0 ? (
                <div className="text-center py-8">
                  <Bug className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                  <p className="text-gray-500">暂无缺陷</p>
                </div>
              ) : (
                <div className="space-y-4">
                  {project.bugs.map((bug) => (
                    <div 
                      key={bug.id} 
                      className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 cursor-pointer"
                      onClick={() => window.location.href = `/bugs/${bug.id}`}
                    >
                      <div className="flex-1">
                        <div className="flex items-center space-x-2 mb-2">
                          <Badge className={getSeverityColor(bug.severity)}>
                            {bug.severity}
                          </Badge>
                          <Badge className={getPriorityColor(bug.priority)}>
                            {bug.priority}
                          </Badge>
                          <Badge className={getStatusColor(bug.status)}>
                            {getStatusLabel(bug.status)}
                          </Badge>
                        </div>
                        <h4 className="font-medium">{bug.title}</h4>
                        <div className="flex items-center space-x-4 mt-2 text-sm text-gray-500">
                          <span>创建者: {bug.creator.name || bug.creator.username}</span>
                          {bug.assignee && (
                            <span>指派给: {bug.assignee.name || bug.assignee.username}</span>
                          )}
                          <span>{new Date(bug.createdAt).toLocaleDateString('zh-CN')}</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="hardware" className="space-y-6">
          <div className="grid gap-6 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Cpu className="h-5 w-5" />
                  <span>硬件版本</span>
                  <Badge variant="secondary">{project.hardwareVersions.length}</Badge>
                </CardTitle>
              </CardHeader>
              <CardContent>
                {project.hardwareVersions.length === 0 ? (
                  <div className="text-center py-8">
                    <Cpu className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                    <p className="text-gray-500">暂无硬件版本</p>
                  </div>
                ) : (
                  <div className="space-y-3">
                    {project.hardwareVersions.map((version) => (
                      <div key={version.id} className="flex items-center justify-between p-3 border rounded-lg">
                        <div>
                          <div className="flex items-center space-x-2 mb-1">
                            <Badge className={getStatusColor(version.status)}>
                              {getStatusLabel(version.status)}
                            </Badge>
                          </div>
                          <h4 className="font-medium">{version.name}</h4>
                          <p className="text-sm text-gray-500">版本 {version.version}</p>
                        </div>
                        <span className="text-sm text-gray-500">
                          {new Date(version.createdAt).toLocaleDateString('zh-CN')}
                        </span>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <FileText className="h-5 w-5" />
                  <span>BOM清单</span>
                  <Badge variant="secondary">{project.boms.length}</Badge>
                </CardTitle>
              </CardHeader>
              <CardContent>
                {project.boms.length === 0 ? (
                  <div className="text-center py-8">
                    <FileText className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                    <p className="text-gray-500">暂无BOM清单</p>
                  </div>
                ) : (
                  <div className="space-y-3">
                    {project.boms.map((bom) => (
                      <div key={bom.id} className="flex items-center justify-between p-3 border rounded-lg">
                        <div>
                          <div className="flex items-center space-x-2 mb-1">
                            <Badge className={getStatusColor(bom.status)}>
                              {getStatusLabel(bom.status)}
                            </Badge>
                          </div>
                          <h4 className="font-medium">{bom.name}</h4>
                          <p className="text-sm text-gray-500">版本 {bom.version}</p>
                          {bom.totalCost && (
                            <p className="text-sm text-green-600">总成本: ¥{bom.totalCost}</p>
                          )}
                        </div>
                        <span className="text-sm text-gray-500">
                          {new Date(bom.createdAt).toLocaleDateString('zh-CN')}
                        </span>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        <TabsContent value="documents" className="space-y-6">
          <DocumentManagement project={project} />
        </TabsContent>

        <TabsContent value="members" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Users className="h-5 w-5" />
                <span>团队成员</span>
                <Badge variant="secondary">{project.members.length}</Badge>
              </CardTitle>
              <CardDescription>
                项目的所有成员及其角色
              </CardDescription>
            </CardHeader>
            <CardContent>
              {project.members.length === 0 ? (
                <div className="text-center py-8">
                  <Users className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                  <p className="text-gray-500">暂无团队成员</p>
                </div>
              ) : (
                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                  {project.members.map((member) => (
                    <div key={member.id} className="flex items-center space-x-3 p-4 border rounded-lg">
                      <div className="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
                        <span className="text-sm font-medium text-gray-700">
                          {(member.user.name || member.user.username || 'U').charAt(0).toUpperCase()}
                        </span>
                      </div>
                      <div className="flex-1">
                        <h4 className="font-medium">{member.user.name || member.user.username}</h4>
                        <p className="text-sm text-gray-500">{member.user.email}</p>
                        <Badge variant="outline" className="mt-1">
                          {member.role}
                        </Badge>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="iterations" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Calendar className="h-5 w-5" />
                <span>迭代周期</span>
                <Badge variant="secondary">{project.iterations.length}</Badge>
              </CardTitle>
              <CardDescription>
                项目的时间周期和里程碑
              </CardDescription>
            </CardHeader>
            <CardContent>
              {project.iterations.length === 0 ? (
                <div className="text-center py-8">
                  <Calendar className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                  <p className="text-gray-500">暂无迭代周期</p>
                </div>
              ) : (
                <div className="space-y-4">
                  {project.iterations.map((iteration) => (
                    <div key={iteration.id} className="flex items-center justify-between p-4 border rounded-lg">
                      <div className="flex-1">
                        <div className="flex items-center space-x-2 mb-2">
                          <Badge className={getStatusColor(iteration.status)}>
                            {getStatusLabel(iteration.status)}
                          </Badge>
                        </div>
                        <h4 className="font-medium">{iteration.name}</h4>
                        <div className="flex items-center space-x-4 mt-2 text-sm text-gray-500">
                          <span>开始: {new Date(iteration.startDate).toLocaleDateString('zh-CN')}</span>
                          <span>结束: {new Date(iteration.endDate).toLocaleDateString('zh-CN')}</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="activity" className="space-y-6">
          <div className="grid gap-6 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <MessageSquare className="h-5 w-5" />
                  <span>评论活动</span>
                  <Badge variant="secondary">{project._count.comments}</Badge>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-center py-8">
                  <MessageSquare className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                  <p className="text-gray-500">
                    {project._count.comments > 0 
                      ? `共有 ${project._count.comments} 条评论`
                      : '暂无评论活动'
                    }
                  </p>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Paperclip className="h-5 w-5" />
                  <span>附件资源</span>
                  <Badge variant="secondary">{project._count.attachments}</Badge>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-center py-8">
                  <Paperclip className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                  <p className="text-gray-500">
                    {project._count.attachments > 0 
                      ? `共有 ${project._count.attachments} 个附件`
                      : '暂无附件资源'
                    }
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}